import React, {PureComponent} from 'react'
import {FormGroupLabel} from '../FormGroupLabel'

interface Props {
  name: string
  label?: string
  isRequired: boolean
  accept?: string
  valid?: boolean
  invalid?: boolean
  disabled?: boolean
  feedback?: string
  onChange: (value: File | FileList) => void
  className?: string
  id?: string
  multiple?: boolean
  helpText?: React.ReactNode
}

class InputFileVertical extends PureComponent<Props> {
  render() {
    let {
      name,
      label,
      isRequired,
      accept,
      valid,
      invalid,
      disabled,
      feedback,
      onChange,
      className,
      id,
      multiple,
      helpText,
    } = this.props
    let newId = id ? id : name + '_' + Math.random()

    return (
      <FormGroupLabel
        className={className}
        label={label}
        isRequired={isRequired}
        helpText={helpText}
        feedback={feedback}
        valid={valid}
        invalid={invalid}>
        <input
          id={newId}
          name={name}
          type={'file'}
          required={isRequired || false}
          accept={accept}
          disabled={disabled}
          multiple={multiple}
          className={'outline-none'}
          onChange={(evt) => {
            if (multiple) {
              onChange(evt.target.files as FileList)
            } else {
              onChange(evt.target.files[0])
            }
          }}
        />
      </FormGroupLabel>
    )
  }
}

export default InputFileVertical
